<template>
  <div>
    <Table border :columns="columns" :data="dataList">
      <template slot-scope="{ row }" slot="maodun_state">
        <span v-show="row.maodun_state === '10'">待接收</span>
        <span v-show="row.maodun_state === '20'">待分配</span>
        <span v-show="row.maodun_state === '30'">已分配等待工作者处理</span>
        <span v-show="row.maodun_state === '40'">社区工作者处理中</span>
        <span v-show="row.maodun_state === '50'">处理完成</span>
        <span v-show="row.maodun_state === '60'">居民已反馈</span>
<!--        <span v-show="row.maodun_state === '70'">处理结束</span>-->
<!--        <span v-show="row.maodun_state === '80'">公布结果</span>-->
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button size="small" type="success" @click="appealDetailButton(row)" style="margin-left: 5px">详情</Button>
        <Button size="small" v-show="row.maodun_state === '10'" type="warning" @click="receiveButton(row, '20')" style="margin-left: 5px">接收</Button>
        <Button size="small" v-show="row.maodun_state === '20'" type="primary" @click="distributionButton(row)" style="margin-left: 5px">分配</Button>
        <Button size="small" v-show="row.maodun_state === '30' && severUserInfo.loginName === row.maodun_login_name_s" type="primary" @click="receiveButton(row, 40)" style="margin-left: 5px">办理</Button>
        <Button size="small" v-show="row.maodun_state === '40' && severUserInfo.loginName === row.maodun_login_name_s" type="primary" @click="processing(row)" style="margin-left: 5px">完成</Button>
<!--        <Button size="small" v-show="row.maodun_state === '70'" type="info" style="margin-left: 5px">分配</Button>-->
      </template>
    </Table>
    <template>
      <div class="pageClass">
        <Page :total="totalRecord" show-sizer @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
      </div>
    </template>
    <Drawer width="1000px" title="矛盾详情" :closable="false" v-model="concradictionShow">
      <div style="font-size: 14px">
        <div class="divtitleClass">
          矛盾发起人信息
        </div>
        <Row>
          <Col span="12">发起人姓名：{{ paramData.name }}</Col>
          <Col span="12">发起人身份证号：{{ paramData.cardno }}</Col>
        </Row>
        <Row>
          <Col span="12">发起人电话号：{{ paramData.mobile }}</Col>
        </Row>
        <div class="divtitleClass">
          矛盾基本信息
        </div>
        <Row>
          <Col span="24">矛盾发起时间：{{paramData.create_time}}</Col>
        </Row>
        <Row>
          <Col span="12">矛盾编码：{{ paramData.maodun_code }}</Col>
          <Col span="12">矛盾标题：{{ paramData.maodun_title }}</Col>
        </Row>
        <Row>
          <Col span="12">矛盾类型：{{ paramData.maodun_type }}</Col>
          <Col span="12">矛盾描述：{{ paramData.maodun_describe }}</Col>
        </Row>
        <Row>
          <Col span="24">矛盾备注：{{ paramData.maodun_remarks }}</Col>
        </Row>
        <Row>
          <Col span="24">矛盾反馈：{{ paramData.maodun_fankui }}</Col>
        </Row>
        <Row>
          <Col span="24">矛盾图片：
            <!--          {{paramData.maodun_img}}-->
            <div v-if="paramData.show && paramData.maodun_img_list.length > 0" style="text-align: center;margin-bottom: 20px;margin-top: 20px">
              <Carousel v-model="carousel_value">
                <CarouselItem v-for="(item,index) in paramData.maodun_img_list" :key="index">
                  <img :src="item" width="100%">
                </CarouselItem>
              </Carousel>
            </div>
          </Col>
        </Row>
        <Row>
          <Col span="24">矛盾视频：</Col>
        </Row>
        <Row>
          <template>
            <div v-if="paramData.maodun_video === '' || paramData.maodun_video === undefined"></div>
            <video v-else id="myVideo" class="video-js">
              <source :src="paramData.maodun_video" type="video/mp4">
            </video>
          </template>
        </Row>
        <Row>
          <Col span="12">矛盾处理人：{{paramData.maodun_login_name_s}}</Col>
        </Row>
        <div class="divtitleClass" v-if="paramData.maodun_result">
          矛盾处理结果
        </div>
        <Row>
          <Col span="12">{{paramData.maodun_result}}</Col>
        </Row>
      </div>
    </Drawer>
    <Modal
      v-model="distributeShow"
      title="分配矛盾"
      @on-ok="distributionOk">
      <div style="text-align: center">
        <Select v-model="pick_office" style="width:200px" placeholder="选择分配 人员">
          <Option v-for="item in officeAccountList" :value="item.login_name" :key="item.id">{{ item.name }} ( {{item.login_name}} )</Option>
        </Select>
      </div>
    </Modal>
    <Modal
      v-model="resultModal"
      title="填写结果"
      @on-ok="resultOk">
      <Input v-model="resultMsg" maxlength="100" show-word-limit type="textarea" placeholder="请填写结果"/>
    </Modal>
  </div>
</template>
<script>
import { findcontradictionList, findOfficeAccountList, createContradictionFlow } from '@/api/ywtbappeal'
export default {
  data () {
    return {
      totalRecord: 0,
      pageNo: 1,
      pageSize: 10,
      resultMsg: '',
      pick_office: '',
      concradictionShow: false,
      distributeShow: false,
      resultModal: false,
      paramData: {},
      distributeInfo: {},
      severUserInfo: {},
      resultInfo: {},
      officeAccountList: [],
      dataList: [],
      columns: [
        { type: 'index', width: 60, align: 'center' },
        { title: '矛盾编号', key: 'maodun_code', minWidth: 60, align: 'center' },
        { title: '姓名', key: 'name', minWidth: 60, align: 'center' },
        { title: '联系电话', key: 'mobile', minWidth: 60, align: 'center' },
        { title: '矛盾标题', key: 'maodun_title', minWidth: 60, align: 'center' },
        { title: '状态', slot: 'maodun_state', minWidth: 60, align: 'center' },
        { title: '调节方式', key: 'maodun_type', minWidth: 60, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 60, align: 'center' }
      ]
    }
  },
  methods: {
    init () {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      if (this.severUserInfo.loginName.endsWith('_admin')) {
        data.type = 'admin'
      }
      findcontradictionList(data).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.totalRecord = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '获取列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    appealDetailButton (item) { // 详情
      this.paramData = {}
      this.paramData = item
      try {
        if (this.paramData.maodun_img) {
          console.log(11111)
          this.paramData.maodun_img_list = this.paramData.maodun_img.split(',')
        }
      } catch (e) {

      }
      this.$nextTick(() => {
        this.initVideo()
      })
      this.concradictionShow = true
    },
    initVideo () {
      // 初始化视频方法
      let myPlayer = this.$video(myVideo, {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,

        // 自动播放属性,muted:静音播放,并且从视频加载完成后就开始播放
        // autoplay: 'muted',

        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',

        // 设置视频播放器的显示宽度（以像素为单位,也可以使用%）
        width: '400px',

        // 设置视频播放器的显示高度（以像素为单位,也可以使用%）
        height: '200px'

        // 设置视频的封面
        // poster: require('../../assets/images/backImg.png')
      })
      console.log(myPlayer)
    },
    receiveButton (item, index) { // 接收
      let data = {
        maodun_code: item.maodun_code,
        maodun_state: index
      }
      createContradictionFlow(data).then(res => {
        if (res.data.errcode === 0) {
          this.init()
        } else {
          this.$Notice.error({
            title: '操作失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    distributionButton (item) { // 分配
      this.distributeInfo = item
      this.distributeShow = true
      this.findOfficeAccountList()
    },
    findOfficeAccountList () {
      findOfficeAccountList().then(ret => {
        if (ret.data.errcode === 0) {
          this.officeAccountList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    distributionOk () {
      let data = {
        maodun_state: '30',
        maodun_code: this.distributeInfo.maodun_code,
        maodun_login_name_s: this.pick_office,
        to_login_name: this.pick_office
      }
      createContradictionFlow(data).then(res => {
        if (res.data.errcode === 0) {
          this.init()
        } else {
          this.$Notice.error({
            title: '操作失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    processing (item) {
      this.resultInfo = item
      this.resultModal = true
    },
    resultOk () {
      let data = {
        maodun_code: this.resultInfo.maodun_code,
        maodun_result: this.resultMsg,
        maodun_state: '50'
      }
      createContradictionFlow(data).then(res => {
        if (res.data.errcode === 0) {
          this.init()
        } else {
          this.$Notice.error({
            title: '操作失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    pageSizeChange (e) {
      this.pageSize = e
      this.pageNo = 1
      this.init()
    },
    pageAction (e) {
      this.pageNo = e
      this.init()
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    console.log(this.severUserInfo.loginName)
    this.init()
  }
}
</script>
<style>
.pageClass{
  margin-top: 20px;
  text-align: right
}
.divtitleClass{
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
</style>
